<template>
  <div class="sign-up-page">
    <nav-back />
    <input
      type="text"
      class="input-wrap"
      v-model.lazy.trim="email"
      placeholder="输入邮箱"
      maxlength="20"
    />
    <input
      type="password"
      class="input-wrap"
      v-model.lazy.trim="password"
      placeholder="设置密码"
      maxlength="12"
    />
    <div class="submit" @click="handleSignUp">
      <button-comp text="注册" size="large" />
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { NavBack, ButtonComp } from '@/components'

export default {
  name: 'sign-up-page',
  components: { NavBack, ButtonComp },
  data: () => ({
    email: '',
    password: ''
  }),
  methods: {
    ...mapActions('Toast', ['addToast']),
    ...mapActions('User', ['signUp']),
    handleSignUp() {
      if (this.email && this.password) {
        this.signUp({ email: this.email, password: this.password }).then(() => {
          this.addToast({ type: 'success', content: '注册成功' })
          this.$router.replace({ name: 'find' })
        })
      } else {
        this.addToast({ type: 'warning', content: '请完整填写信息' })
      }
    }
  },

  beforeRouteLeave(from, to, next) {
    this.email = ''
    this.password = ''
    next()
  }
}
</script>

<style lang="stylus">
$input-size = 20px;

.sign-up-page {
  background-color: #fff;

  .input-wrap {
    display: block;
    margin: 20px auto 0;
    width: 280px;
    max-width: 80%;
    padding: 0.25 * $input-size 0.75 * $input-size;
    line-height: $input-size;
    font-size: 16px;
    border: none;
    outline: none;
    border-radius: $input-size;
    background-color: $app-bgc;
  }

  .submit {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
